$(function () {
    // 新闻列表功能
    let $newLi = $(".news-nav ul li");
    // 默认第一页
    let iPage = 1;
    // 默认总页数
    let iTotalPage = 1;
    // 默认分类标签
    let sCurrentTagId = 0;
    // 是否向后台加载数据
    let bIsLoadData = true;

    fn_load_content();

    $newLi.click(function () {
        $(this).addClass("active").siblings("li").removeClass("active");
        let sClickTagId = $(this).children('a').attr('data-id');
        if(sClickTagId !== sCurrentTagId){
            sCurrentTagId = sClickTagId;
            iPage = 1;
            iTotalPage = 1;
            fn_load_content();
        }
    });

    // 页面滚动加载
    $(window).scroll(function () {
        // 浏览器窗口高度
        let showHeight = $(window).height();
        // 整个网页的高度
        let pageHeight = $(document).height();
        // 页面可以滚动的距离
        let canScrollHeight = pageHeight - showHeight;

        // 页面滚动了多少，这个是随着页面滚动实时变化的
        let nowScroll = $(document).scrollTop();
        if((canScrollHeight - nowScroll) < 100){
            if(!bIsLoadData){
                bIsLoadData = true;
                // 如果当前页数据小于总页数，那么才去加载数据
                if(iPage < iTotalPage){
                    iPage += 1;
                    $(".btn-more").remove();
                    // 加载数据
                    fn_load_content();
                }
                else{
                    message.showInfo("已全部加载，没有更多内容！");
                    $(".btn").remove();
                    $(".news-list").append($('<a href="javascript:void(0);" class="btn-more">已全部加载，没有更多内容！</a>'))
                }
            }
        }
    });

    // 定义向后端获取新闻列表数据的请求
    function fn_load_content() {
        // 创建请求参数
        let sDataParams = {
            "tag_id": sCurrentTagId,
            "page": iPage
        }
        // 创建ajax请求
        $.ajax({
            url: "/news/",
            type: "GET",
            data: sDataParams,
            dataType: "json"
        })
            .done(function (res) {
                if(res.errno === "0"){
                    iTotalPage = res.data.total_page;
                    if(iPage === 1){
                        $(".news-list").html("")
                    }
                    res.data.news.forEach(function (one_news) {
                        let content = `
                          <li class="news-item">
                             <a href="/news/${one_news.id}/" class="news-thumbnail" target="_blank">
                                <img src="${one_news.image_url}" alt="${one_news.title}" title="${one_news.title}">
                             </a>
                             <div class="news-content">
                                <h4 class="news-title"><a href="/news/${one_news.id}/">${one_news.title}</a></h4>
                                <p class="news-details">${one_news.digest}</p>
                                <div class="news-other">
                                  <span class="news-type">${one_news.tag_name}</span>
                                  <span class="news-time">${one_news.update_time}</span>
                                  <span class="news-author">${one_news.author}</span>
                                </div>
                          </li>`;

                        $(".news-list").append(content);
                    });
                    $(".news-list").append($('<a href="javascript:void(0);" class="btn-more">滚动加载更多</a>'));
                    bIsLoadData = false;
                }
                else{
                    message.showError(res.errmsg);
                }
            })
            .fail(function () {
                message.showError('服务器超时，请重试！');
            })
    }

    fn_load_banner();

    // 轮播图
    let $banner = $(".banner");
    let $picLi = $(".banner .pic li");
    let $prev = $(".banner .prev");
    let $next = $(".banner .next");
    let $tabLi = $(".banner .tab li");
    let index = 0;

    // 小圆点点击事件
    $tabLi.click(function () {
        index = $(this).index();
        $(this).addClass("active").siblings("li").removeClass("active");
        $picLi.eq(index).fadeIn(1500).siblings("li").fadeOut(1500);
    });
    // 点击切换上一张
    $prev.click(function () {
        index--;
        if(index < 0){
            index = $tabLi.length - 1;
        }
        $tabLi.eq(index).addClass("active").siblings("li").removeClass("active");
        $picLi.eq(index).fadeIn(1500).siblings("li").fadeOut(1500);

    }).mousedown(function () {
        return false;
    });

    // 点击切换下一张
    $next.click(auto).mousedown(function(){
        return false;
    })

    function auto(){
        index ++;
        index %= $tabLi.length;
        $tabLi.eq(index).addClass("active").siblings("li").removeClass("active");
        $picLi.eq(index).fadeIn(1500).siblings("li").fadeOut(1500);
    }

    // 定时器
    let timer = setInterval(auto, 2000);
    $banner.hover(function () {
        clearInterval(timer);
    }, function () {
        auto();
    });

    function fn_load_banner(){
        $.ajax({
            url: "/news/banner/",
            type: "GET",
            async: false
        })
            .done(function (res) {
                if(res.errno === "0"){
                    let content = ``;
                    let tab_content = ``;
                    $(".pic").html("");
                    $(".tab").html("");
                    res.data.banner.forEach(function(one_banner, index){
                        // console.log(one_banner);
                        if(index === 0){
                            console.log(one_banner);
                            content = `
                            <li style="display:block;"><a href="/news/${one_banner.news_id}/">
                 <img src="${one_banner.image_url}" alt="${one_banner.news_title}"></a></li>
                            `;
                            tab_content = `
                            <li class="active"></li>
                            `
                        }
                        else{
                            console.log(one_banner);
                            content = `
                            <li><a href="/news/${one_banner.news_id}/"><img src="${one_banner.image_url}" alt="${one_banner.news_title}"></a></li>
                            `
                            tab_content = `
                            <li></li>
                            `
                        }
                        $(".pic").append(content);
                        $(".tab").append(tab_content);
                    })
                }
                else{
                    message.showError(res.errmsg);
                }
            })
            .fail(function(){
                message.showError('服务器超时，请重试！');
            })
    }
})